﻿@{
    ViewBag.Title = "Job List";
}
<script src="~/Scripts/Breezejs/JobList.js"></script>
<style>
    .form-group{
        margin-bottom: 0;
    }
</style>


<div class="col-md-12" >
    <button id="_down" class="btn btn-default btn-sm" onclick="slidedown()" title="Show search form" style="display:none">
        <span class="glyphicon glyphicon-chevron-down" title="Search"></span> Show Search form
    </button>
    <button id="_up" class="btn btn-default btn-sm" onclick="slideup()" title="Hide search form">
        <span class="glyphicon glyphicon-chevron-up" title="Search"></span> Hide Search form
    </button>
</div>

<div id="_searchform" style="width: 100%; height: 200px; border: 1px solid #e3e3e3; padding: 5px; ">
    <div class="col-md-5" style="padding:0">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <h6><label class="col-sm-3 control-label">Job Name</label></h6>
                <div class="col-sm-9">
                    <input id="_searchJobname" type="text" class="form-control input-sm" placeholder="Job Name">
                </div>
            </div>
            <div class="form-group">
                <h6><label class="col-sm-3 control-label">Function</label></h6>
                <div class="col-sm-9">
                    <div class="col-sm-6" style="padding:0">
                        <select class="form-control input-sm" data-bind="options: Industry,
                                           optionsText: 'Name',
                                           value: selectIndustry,
                                           optionsCaption: 'Industry...'"></select>
                    </div>
                    <!-- ko template: typeof vm.selectIndustry() != 'undefined' ? '_function' : '' --><!-- /ko -->
                    <script id="_function" type="text/html">
                        <div class="col-sm-6" style="padding:0; display:inline">
                            <select class="form-control input-sm" data-bind="options: vm.selectIndustry().Children,
                                           optionsText: 'Name',
                                           value: selectFunction,
                                           optionsCaption: 'Function...'"></select>
                        </div>
                    </script>
</div>
            </div>
            <div class="form-group">
                <h6><label class="col-sm-3 control-label">Location</label></h6>
                <div class="col-sm-9">
                    <div class="col-sm-4" style="padding:0">
                        <select class="form-control input-sm" data-bind="options: Country,
                                           optionsText: 'Name',
                                           value: selectCountry,
                                           optionsCaption: 'Country...'"></select>
                    </div>
                    <!-- ko template: typeof vm.selectCountry() != 'undefined' ? '_province' : '' --><!-- /ko -->
                    <script id="_province" type="text/html">
                        <div class="col-sm-4" style="padding:0;">
                            <select class="form-control input-sm" data-bind="options: vm.selectCountry().Children,
                                           optionsText: 'Name',
                                           value: selectProvince,
                                           optionsCaption: 'Province...'"></select>
                        </div>
                    </script>
                    <!-- ko template: typeof vm.selectProvince() != 'undefined' && vm.selectProvince() != ''  ? '_city' : '' --><!-- /ko -->
                    <script id="_city" type="text/html">
                        <div class="col-sm-4" style="padding:0;">
                            <select class="form-control input-sm" data-bind="options: vm.selectProvince().Children,
                                           optionsText: 'Name',
                                           value: selectCity,
                                           optionsCaption: 'City...'"></select>
                        </div>
                    </script>

                </div>
            </div>
            <div class="form-group">
                <h6><label class="col-sm-3 control-label">Salary</label></h6>
                <div class="col-sm-9">
                    <div class="col-sm-6" style="padding:0">
                        <input id="_searchSalaryFr" type="text" class="form-control input-sm" placeholder="From" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="this.value = addCommas(this.value)">
                    </div>
                    <div class="col-sm-6" style="padding:0">
                        <input id="_searchSalaryTo" type="text" class="form-control input-sm" placeholder="To" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="this.value = addCommas(this.value)">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-3">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <h6><label class="col-sm-3 control-label">Date Post</label></h6>
                <div class="col-sm-9">
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" value="7">
                            Last 7 days
                        </label>
                    </div>

                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" value="14">
                            Last 14 days
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" value="30">
                            Last 30 days
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" value="all">
                            All
                        </label>
                    </div>
                </div>
                
            </div>
            <div class="form-group">
                <label class="col-sm-3"></label>
                <div class="col-sm-9">
                    <button type="button" class="btn btn-primary" onclick="_Search()">
                        <span class="glyphicon glyphicon-search"></span> 
                        Search
                    </button>
                    </div>
                    
                </div>
        </form>
</div>
    <div class="col-md-4" align="center">
        <div style="height:200px;width:100%">
            <img style="width: 100%; height: 100%;" src="~/Content/job_openings.png" />
        </div>
        
    </div>
     
</div>

<div id="_loading" style="width:150px; height:150px; display:none; margin-left: auto; margin-right:auto">
    <img style="width:100%; height:100%" src="~/Content/loading.gif" />
</div>

 <!-- ko template: Joblist().length > 0 ? '_joblist' : '_notfound' --><!-- /ko -->
<script id="_joblist" type="text/html">
    <div id="Joblist" style="min-height: 300px">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Job Code</th>
                    <th>Job Name</th>
                    <th>Function</th>
                    <th>City</th>
                    <th>Salary</th>
                    <th>Job Status</th>
                    <th>Date Posted</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: Joblist">
                <tr>
                    <td><span data-bind="text: $index() + 1"></span></td>
                    <td><span data-bind="text: UniqueId"></span></td>
                    <td>
                        <a data-bind="attr: { href: '../Home/JobDetail/?jobcode=' + UniqueId() }"><span data-bind="text: Name"></span></a>

                    </td>
                    <td><span data-bind="text: Industry().Name"></span></td>
                    <td><span data-bind="text: Location().Name"></span></td>
                    <td>
                        <span data-bind="text: StandardSalary"></span> 
                        <!-- ko if: Currency() != null -->
                        <span data-bind="text: Currency().Currencysigns"></span>
                        <!-- /ko -->
                        
                    </td>
                    <td>
                        <!-- ko if: Status -->
                        <span>Open</span>
                        <!-- /ko -->
                        <!-- ko if: !Status -->
                        <span>Closed</span>
                        <!-- /ko -->
                    </td>
                    <td><span data-bind="text: moment(DatePost()).format('DD/MM/YYYY')"></span></td>
                </tr>

            </tbody>


        </table>

        <div align="center" style="min-height: 40px">
            <ul id="paginator" class="pagination"></ul>
        </div>
    </div>
</script>

<script id="_notfound" type="text/html">
    <div style="width:150px; height:150px; margin-left: auto; margin-right:auto">
        <span>No results found</span>
    </div>
</script>

    <div class="col-md-12 morecontact" style="height: 100px; border-top: 2px solid #e7e7e7; padding-top:10px">
        <div class="col-md-3">
            <h4>Job by Function</h4>
            <ul style="list-style-type:none;">
                <li><a href="#">Research</a></li>
                <li><a href="#">Hi-Tech</a></li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Risk</a></li>
                <li><a href="#">Leasing</a></li>
            </ul>
        </div>
        <div class="col-md-3">
            <h4>Job by Country</h4>
            <ul style="list-style-type:none;">
                <li><a href="#">Việt Nam</a></li>
                <li><a href="#">American</a></li>
                <li><a href="#">Japan</a></li>
                <li><a href="#">Australia</a></li>
                <li><a href="#">Lao</a></li>
            </ul>
        </div>
        <div class="col-md-3" align="right">
            <h4>Job by Province</h4>
            <ul style="list-style-type:none;">
                <li>
                    <a href="#">Miền Bắc</a>
                </li>
                <li>
                    <a href="#">Miền Trung</a>
                </li>
                <li>
                    <a href="#">Miền Nam</a>
                </li>
                <li>
                    <a href="#">Miền Tây Bắc</a>
                </li>
                <li>
                    <a href="#">Miền Tây Bắc</a>
                </li>
            </ul>
        </div>
        <div class="col-md-3" align="right">
            <h4>Job by City</h4>
            <ul style="list-style-type:none;">
                <li>
                    <a href="#">Cà Mau</a>
                </li>
                <li>
                    <a href="#">Tp HCM</a>
                </li>
                <li>
                    <a href="#">Hà Nội</a>
                </li>
                <li>
                    <a href="#">Vũng Tàu</a>
                </li>
            </ul>
        </div>
    </div>
